<template>
  <div id="app">
    <!-- router-link类似有a标签 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 传递参数
    1. params
    2. query -->
    <!-- <router-link :to="'/user/' + userId">用户</router-link>
    <router-link
      :to="{
        path: '/profile',
        query: { name: 'summer', id: 18 }
      }"
    >
      档案</router-link
    > -->
    <!-- 现在不用router-link来跳转 -->
    <button @click="UserClick">用户</button>
    <button @click="ProfileClick">档案</button>
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->

    <!-- <router-view></router-view> -->
    <!-- include:会被缓存
    exclude:每次都会重新创建 -->
    <keep-alive exclude="profile,user">
      <router-view></router-view>
    </keep-alive>
    <!-- keep-alive可以不被销毁 -->
    <!-- 用于告诉我们这些home，about里面的内容放在哪里 -->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userId: "summer",
    };
  },
  methods: {
    homeClick() {
      // 通过代码的形式去修改vue-router
      // this.$router.push("/home");
      // 因为整个是一个栈，push，我们会默认选择最上面的那一个
      // 也可以换用replace
      this.$router.replace("/home");
      console.log("homeCLick");
    },
    aboutClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
      console.log("aboutCLick");
    },
    // 因为我们传入的是一个对象，所以，我push也需要是一个对象
    ProfileClick(){
      this.$router.push({
        path:'/profile',
        query:{
          name:'alex',
          id:20
        }
      })
    },
    // 因为我们传入的是一个字符串，所以我们push进去也是一个字符串
    UserClick(){
      this.$router.push('/user/'+this.userId)
    }
  },
};
</script>

<style scoped>
.router-link-active {
  color: red;
}
</style>
